<!doctype html>
<html lang="en">

<head>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

   <link rel="stylesheet" href="https://block.codescandy.com/assets/libs/swiper/swiper-bundle.min.css" />
   <!-- Favicon icon-->
   <link rel="apple-touch-icon" sizes="180x180"
      href="https://block.codescandy.com/assets/images/favicon/apple-touch-icon.png" />
   <link rel="icon" type="image/png" sizes="32x32"
      href="https://block.codescandy.com/assets/images/favicon/favicon-32x32.png" />
   <link rel="icon" type="image/png" sizes="16x16"
      href="https://block.codescandy.com/assets/images/favicon/favicon-16x16.png" />
   <link rel="manifest" href="https://block.codescandy.com/assets/images/favicon/site.webmanifest" />
   <link rel="mask-icon" href="https://block.codescandy.com/assets/images/favicon/block-safari-pinned-tab.svg"
      color="#8b3dff" />
   <link rel="shortcut icon" href="https://block.codescandy.com/assets/images/favicon/favicon.ico" />
   <meta name="msapplication-TileColor" content="#8b3dff" />
   <meta name="msapplication-config" content="https://block.codescandy.com/assets/images/favicon/tile.xml" />

   <!-- Color modes -->
   <script src="https://block.codescandy.com/assets/js/vendors/color-modes.js"></script>

   <!-- Libs CSS -->
   <link href="https://block.codescandy.com/assets/libs/simplebar/dist/simplebar.min.css" rel="stylesheet" />
   <link href="https://block.codescandy.com/assets/libs/bootstrap-icons/font/bootstrap-icons.min.css"
      rel="stylesheet" />

   <!-- Scroll Cue -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/libs/scrollcue/scrollCue.css" />

   <!-- Box icons -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/fonts/css/boxicons.min.css" />

   <!-- Theme CSS -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/css/theme.min.css">

   <title>Saas v1 - Responsive Website Template | Block</title>
</head>

<body>
   <!-- Navbar -->
   <header>
      <nav class="navbar navbar-expand-lg navbar-light w-100">
         <div class="container px-3">
            <a class="navbar-brand" href="./index.html"><img
                  src="https://block.codescandy.com/assets/images/logo/logo.svg" alt /></a>
            <button class="navbar-toggler offcanvas-nav-btn" type="button">
               <i class="bi bi-list"></i>
            </button>
            <div class="offcanvas offcanvas-start offcanvas-nav" style="width: 20rem">
               <div class="offcanvas-header">
                  <a href="./index.html" class="text-inverse"><img
                        src="https://block.codescandy.com/assets/images/logo/logo.svg" alt /></a>
                  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
               </div>
               <div class="offcanvas-body pt-0 align-items-center">
                  <ul class="navbar-nav mx-auto align-items-lg-center">
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">Landings</a>
                        <ul class="dropdown-menu">
                           <li><a class="dropdown-item" href="./index.html">Landing Overview</a></li>
                           <li>
                              <a class="dropdown-item" href="./landing-blog.html">Blog</a>
                           </li>
                           <li>
                              <a class="dropdown-item" href="./landing-ai-studio.html">AI Studio</a>
                           </li>
                           <li>
                              <a class="dropdown-item" href="./landing-mobile-app-showcase.html">Mobile App Showcase</a>
                           </li>

                           <li><a class="dropdown-item" href="./landing-sass-v1.html">Saas v.1</a></li>
                           <li><a class="dropdown-item" href="./landing-sass-v2.html">Sass v.2</a></li>
                           <li>
                              <a class="dropdown-item" href="./landing-it-company.html">IT Company</a>
                           </li>
                           <li>
                              <a class="dropdown-item" href="./landing-seo.html">Seo Agency</a>
                           </li>
                           <li><a class="dropdown-item" href="./landing-accounting.html">Accounting</a></li>
                           <li><a class="dropdown-item" href="./landing-finance.html">Finance</a></li>
                           <li><a class="dropdown-item" href="./landing-jamstack-agancy.html">Jamstack Agency</a></li>
                           <li><a class="dropdown-item" href="./landing-conference.html">Conference</a></li>
                           <li><a class="dropdown-item" href="./landing-personal.html">Personal</a></li>
                        </ul>
                     </li>
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">Pages</a>
                        <div class="dropdown-menu dropdown-menu-xxl">
                           <div class="row row-cols-lg-4 row-cols-1 g-0">
                              <div class="col">
                                 <div>
                                    <div>
                                       <div class="dropdown-header">Blog</div>
                                       <a class="dropdown-item" href="./blog-list-view.html">List View</a>
                                       <a class="dropdown-item" href="./blog.html">Grid View</a>
                                       <a class="dropdown-item" href="./blog-grid-thumbnail.html">Grid View v.2</a>
                                       <a class="dropdown-item" href="./blog-sidebar.html">Sidebar</a>
                                       <a class="dropdown-item" href="./blog-category.html">Category</a>
                                       <a class="dropdown-item" href="./blog-single.html">Single Post</a>
                                    </div>
                                    <div class="mt-3">
                                       <div class="dropdown-header">About</div>
                                       <a class="dropdown-item" href="./about.html">About v.1</a>
                                       <a class="dropdown-item" href="./about-v2.html">About v.2</a>
                                    </div>
                                 </div>
                              </div>
                              <div class="col">
                                 <div class="mt-3 mt-lg-0">
                                    <div>
                                       <div class="dropdown-header">Service</div>
                                       <a class="dropdown-item" href="./service-v1.html">Service v.1</a>
                                       <a class="dropdown-item" href="./service-v2.html">Service v.2</a>
                                       <a class="dropdown-item" href="./service-v3.html">Service v.3</a>
                                    </div>
                                    <div class="mt-3">
                                       <div class="dropdown-header">Events</div>

                                       <a class="dropdown-item" href="./events.html">List</a>
                                       <a class="dropdown-item" href="./event-single.html">Single</a>
                                    </div>
                                    <div class="mt-3">
                                       <div class="dropdown-header">Contact</div>

                                       <a class="dropdown-item" href="./contact-1.html">Contact Us</a>
                                       <a class="dropdown-item" href="./contact-2.html">Contact Sales</a>
                                    </div>
                                 </div>
                              </div>
                              <div class="col">
                                 <div class="mt-3 mt-lg-0">
                                    <div>
                                       <div class="dropdown-header">Portfolio</div>

                                       <a class="dropdown-item" href="./portfolio.html">Grid View</a>
                                       <a class="dropdown-item" href="./portfolio-3-columns.html">3 Columns</a>

                                       <a class="dropdown-item" href="./portfolio-single.html">Single View</a>
                                    </div>
                                    <div class="mt-3">
                                       <div class="dropdown-header">Pricing</div>
                                       <a class="dropdown-item" href="./pricing-v1.html">Pricing v.1</a>
                                       <a class="dropdown-item" href="./pricing-v2.html">Pricing v.2</a>
                                    </div>
                                    <div class="mt-3">
                                       <div class="dropdown-header">Career</div>
                                       <a class="dropdown-item" href="./career.html">Career</a>
                                    </div>
                                 </div>
                              </div>
                              <div class="col">
                                 <div class="mt-3 mt-lg-0">
                                    <div>
                                       <div class="dropdown-header">Integration</div>
                                       <a class="dropdown-item" href="./integration.html">Grid View</a>
                                       <a class="dropdown-item" href="./integration-single.html">Single</a>
                                    </div>
                                    <div class="mt-3">
                                       <div>
                                          <div class="dropdown-header">Case Study</div>
                                          <a class="dropdown-item" href="./case-study.html">Grid View</a>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li class="nav-item dropdown dropdown-fullwidth">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">Blocks</a>
                        <div class="dropdown-menu p-4">
                           <div class="row row-cols-xl-6 row-cols-lg-5 row-cols-1 gx-lg-4">
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/hero.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/hero-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Hero</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/navbar.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/header-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Navbar</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/about.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/about-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>About</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/blog.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/blog-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Blog</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/carousel.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/carousel-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Carousel</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/case-study.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/case-study-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Case Study</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/cta.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/call-to-action-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Call to Action</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/clients.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/clients-logo-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Client</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/contact.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/contact-section-example.svg"
                                          alt="" />
                                    </div>
                                    <span>Contact</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/form.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2"><img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/form-snippets-bootstrap.svg"
                                          alt="" /></div>
                                    <span>Form</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/faq.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2"><img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/faq-section-example.svg"
                                          alt="" /></div>
                                    <span>FAQ</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/team.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2"><img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/team-snippets-bootstrap.svg"
                                          alt="" /></div>
                                    <span>Team</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/footer.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/footer-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Footer</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/features.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/feature-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Features</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/integration.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/integration-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Integration</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/industry.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/industry-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Industry</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/location.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/location-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Location</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/portfolio.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/portfolio-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Portfolio</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/process.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/process-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Process</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/pricing.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2 bg-gray-200">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/pricing-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Pricing</span>
                                 </a>
                              </div>

                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/facts.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/stats-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Stats</span>
                                 </a>
                              </div>
                              <div class="col">
                                 <a class="dropdown-item d-block px-0 mb-lg-3" href="./blocks/testimonails.html">
                                    <div class="rounded d-none d-lg-block mb-lg-2">
                                       <img class="w-100 rounded-2"
                                          src="https://block.codescandy.com/assets/images/block/testimonial-snippets-bootstrap.svg"
                                          alt="" />
                                    </div>
                                    <span>Testimonials</span>
                                 </a>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">Accounts</a>
                        <ul class="dropdown-menu">
                           <li><a class="dropdown-item" href="./account-profile.html">Profile</a></li>
                           <li><a class="dropdown-item" href="./account-security.html">Security</a></li>
                           <li><a class="dropdown-item" href="./account-billing.html">Billing</a></li>
                           <li><a class="dropdown-item" href="./account-team.html">Team</a></li>
                           <li><a class="dropdown-item" href="./account-notification.html">Notifications</a></li>
                           <li><a class="dropdown-item" href="./account-app-integration.html">Integration</a></li>
                           <li><a class="dropdown-item" href="./account-device-session.html">Session</a></li>
                           <li><a class="dropdown-item" href="./account-social-links.html">Social</a></li>
                           <li><a class="dropdown-item" href="./account-appearance.html">Appearance</a></li>
                           <li class="dropdown-submenu dropend">
                              <a class="dropdown-item dropdown-toggle" href="#">Authentication</a>
                              <ul class="dropdown-menu">
                                 <li class="dropdown-header">Simple</li>

                                 <li>
                                    <a class="dropdown-item" href="./signin.html">Sign In</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./signup.html">Sign Up</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./forget-password.html">Forget Password</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./reset-password.html">Reset Password</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./otp-varification.html">OTP Varification</a>
                                 </li>
                                 <li>
                                    <hr class="dropdown-divider" />
                                 </li>
                                 <li class="dropdown-header">Side Cover</li>

                                 <li>
                                    <a class="dropdown-item" href="./signin-v2.html">Sign In</a>
                                 </li>

                                 <li>
                                    <a class="dropdown-item" href="./signup-v2.html">Sign Up</a>
                                 </li>

                                 <li>
                                    <a class="dropdown-item" href="./forget-password-v2.html">Forget Password</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./reset-password-v2.html">Reset Password</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./otp-varification-v2.html">OTP Varification</a>
                                 </li>
                              </ul>
                           </li>
                           <li class="dropdown-submenu dropend">
                              <a class="dropdown-item dropdown-toggle" href="#">Utility</a>
                              <ul class="dropdown-menu">
                                 <li>
                                    <a class="dropdown-item" href="./404-error.html">404 Error</a>
                                 </li>
                                 <li>
                                    <a class="dropdown-item" href="./changelog.html">Changelog</a>
                                 </li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                        <div class="dropdown-menu dropdown-menu-md" aria-labelledby="navbarDropdown">
                           <a class="dropdown-item mb-3 text-body" href="./docs/index.html">
                              <div class="d-flex align-items-center">
                                 <i class="bi bi-file-text fs-4 text-primary"></i>
                                 <div class="ms-3 lh-1">
                                    <h5 class="mb-1">Documentations</h5>
                                    <p class="mb-0 fs-6">Browse the all documentation</p>
                                 </div>
                              </div>
                           </a>

                           <a class="dropdown-item text-body" href="./docs/changelog.html">
                              <div class="d-flex align-items-center">
                                 <i class="bi bi-clipboard fs-4 text-primary"></i>
                                 <div class="ms-3 lh-1">
                                    <h5 class="mb-1">
                                       Changelog
                                       <span class="text-primary ms-1"></span>
                                    </h5>
                                    <p class="mb-0 fs-6">See what's new</p>
                                 </div>
                              </div>
                           </a>
                        </div>
                     </li>
                  </ul>
                  <div class="mt-3 mt-lg-0 d-flex align-items-center">
                     <a href="./signin.html" class="btn btn-light mx-2">Login</a>
                     <a href="./signup.html" class="btn btn-primary">Create account</a>
                  </div>
               </div>
            </div>
         </div>
      </nav>
   </header>

   <main>
      <!--Pageheader start-->
      <div class="pattern-square"></div>
      <section class="pt-lg-7 pt-5" data-cue="fadeIn">
         <div class="container">
            <div class="row align-items-center justify-content-lg-start justify-content-center flex-lg-nowrap">
               <div class="col-lg-5 col-12" data-cues="slideInDown" data-group="page-title" data-delay="700">
                  <div class="text-center text-lg-start" data-cue="zoomIn">
                     <div class="mb-5">
                        <span
                           class="badge align-items-center p-2 pe-3 ps-3 fs-6 text-primary border border-primary-subtle rounded-pill mb-4">New:
                           Our Live collaborative just landed</span>
                        <h1 class="mb-3 display-4">Build your next project even faster.</h1>
                        <p class="lead mb-0">Block makes it easy to get your most important work done. Increase
                           efficiency to deliver result & hit your goal on every project.</p>
                     </div>
                     <div data-cues="slideInDown" data-group="page-title-buttons" data-delay="800">
                        <a href="#" class="btn btn-primary me-2">Try for Free</a>
                        <a href="#" class="btn btn-light">Book a demo</a>
                     </div>

                     <div class="d-flex flex-wrap gap-4 my-6" data-cues="slideInDown" data-group="page-title-buttons"
                        data-delay="900">
                        <div class="d-flex align-items-center">
                           <span class="border p-2 align-items-center rounded bg-white text-primary d-inline-flex">
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-credit-card" viewBox="0 0 16 16">
                                 <path
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7z" />
                                 <path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z" />
                              </svg>
                           </span>
                           <span class="ms-2 fs-6">No credit card required</span>
                        </div>

                        <div class="d-flex align-items-center">
                           <span class="border p-2 align-items-center rounded bg-white text-primary d-inline-flex">
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-cash-stack" viewBox="0 0 16 16">
                                 <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
                                 <path
                                    d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z" />
                              </svg>
                           </span>
                           <span class="ms-2 fs-6">Free until upgrade</span>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-xxl-7 offset-xxl-1 col-lg-7 col-12 mt-5 mt-lg-0" data-cue="fadeIn" data-delay="1000">
                  <div class="position-relative">
                     <div class="bg-light-subtle p-md-4 p-2 rounded-4 border scene" data-relative-input="true">
                        <div data-depth="0.09">
                           <figure data-cues="zoomIn" data-delay="900">
                              <img src="https://block.codescandy.com/assets/images/landings/saas/app-screen-1.jpg"
                                 alt="landing" class="w-100 rounded-4 shadow border" />
                           </figure>
                        </div>
                     </div>
                     <div class="position-absolute top-50 mt-n10 start-0 ms-n4 d-none d-lg-block">
                        <div class="badge text-bg-info text-white-stablepx-3 py-2 fs-6 rounded-pill">Developer</div>
                        <div class="position-absolute top-0 end-0 mt-n3 me-n3">
                           <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                 d="M22.3722 2.21902C22.4794 2.32632 22.5515 2.46361 22.5791 2.61278C22.6067 2.76194 22.5884 2.91597 22.5267 3.05452L14.0412 22.1465C13.9819 22.28 13.8849 22.3933 13.7621 22.4725C13.6393 22.5517 13.4961 22.5933 13.35 22.5921C13.2039 22.591 13.0613 22.5473 12.9397 22.4662C12.8182 22.3852 12.7229 22.2704 12.6657 22.136L9.60416 14.987L2.45366 11.924C2.31974 11.8664 2.20552 11.771 2.12495 11.6496C2.04439 11.5281 2.00097 11.3857 2.00002 11.24C1.99906 11.0942 2.04061 10.9513 2.11958 10.8288C2.19854 10.7062 2.31151 10.6094 2.44466 10.55L21.5367 2.06452C21.675 2.00309 21.8287 1.98497 21.9776 2.01255C22.1265 2.04012 22.265 2.1121 22.3722 2.21902Z"
                                 fill="#0DCAF0" />
                           </svg>
                        </div>
                     </div>
                     <div class="position-absolute bottom-50 mb-n10 start-0 d-none d-lg-block">
                        <div class="badge text-bg-success text-white-stablepx-3 py-2 fs-6 rounded-pill">Manager</div>
                        <div class="position-absolute top-0 end-0 mt-n3 me-n3">
                           <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                 d="M22.3722 2.21902C22.4794 2.32632 22.5515 2.46361 22.5791 2.61278C22.6067 2.76194 22.5884 2.91597 22.5267 3.05452L14.0412 22.1465C13.9819 22.28 13.8849 22.3933 13.7621 22.4725C13.6393 22.5517 13.4961 22.5932 13.35 22.5921C13.2039 22.591 13.0613 22.5473 12.9397 22.4662C12.8182 22.3852 12.7229 22.2704 12.6657 22.136L9.60416 14.987L2.45366 11.924C2.31974 11.8664 2.20552 11.771 2.12495 11.6496C2.04439 11.5281 2.00097 11.3857 2.00002 11.24C1.99906 11.0942 2.04061 10.9513 2.11958 10.8288C2.19854 10.7062 2.31151 10.6094 2.44466 10.55L21.5367 2.06452C21.675 2.00309 21.8287 1.98497 21.9776 2.01255C22.1265 2.04012 22.265 2.1121 22.3722 2.21902Z"
                                 fill="#198754" />
                           </svg>
                        </div>
                     </div>
                     <div class="position-absolute bottom-0 me-n8 end-0 d-none d-lg-block">
                        <div class="badge text-bg-danger text-white-stablepx-3 py-2 fs-6 rounded-pill">Designer</div>
                        <div class="position-absolute top-0 start-0 mt-n3 ms-n3">
                           <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                 d="M2.21946 2.21902C2.11223 2.32632 2.04007 2.46361 2.01248 2.61278C1.9849 2.76194 2.0032 2.91597 2.06496 3.05452L10.5505 22.1465C10.6097 22.28 10.7067 22.3933 10.8295 22.4725C10.9523 22.5517 11.0956 22.5933 11.2416 22.5921C11.3877 22.591 11.5303 22.5473 11.6519 22.4662C11.7735 22.3852 11.8687 22.2704 11.926 22.136L14.9875 14.987L22.138 11.924C22.2719 11.8664 22.3861 11.771 22.4667 11.6496C22.5472 11.5281 22.5906 11.3857 22.5916 11.24C22.5926 11.0942 22.551 10.9513 22.472 10.8288C22.3931 10.7062 22.2801 10.6094 22.147 10.55L3.05496 2.06452C2.91659 2.00309 2.76287 1.98497 2.61402 2.01255C2.46516 2.04012 2.32664 2.1121 2.21946 2.21902Z"
                                 fill="#DC3545" />
                           </svg>
                        </div>
                     </div>
                     <div class="position-absolute top-0 mt-10 end-0 d-none d-lg-block">
                        <div class="badge text-bg-primary text-white-stablepx-3 py-2 fs-6 rounded-pill">User</div>
                        <div class="position-absolute top-0 start-0 mt-n3 ms-n3">
                           <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                 d="M2.21946 2.21902C2.11223 2.32632 2.04007 2.46361 2.01248 2.61278C1.9849 2.76194 2.0032 2.91597 2.06496 3.05452L10.5505 22.1465C10.6097 22.28 10.7067 22.3933 10.8295 22.4725C10.9523 22.5517 11.0956 22.5933 11.2416 22.5921C11.3877 22.591 11.5303 22.5473 11.6519 22.4662C11.7735 22.3852 11.8687 22.2704 11.926 22.136L14.9875 14.987L22.138 11.924C22.2719 11.8664 22.3861 11.771 22.4667 11.6496C22.5472 11.5281 22.5906 11.3857 22.5916 11.24C22.5926 11.0942 22.551 10.9513 22.472 10.8288C22.3931 10.7062 22.2801 10.6094 22.147 10.55L3.05496 2.06452C2.91659 2.00309 2.76287 1.98497 2.61402 2.01255C2.46516 2.04012 2.32664 2.1121 2.21946 2.21902Z"
                                 fill="#8B3DFF" />
                           </svg>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Pageheader end-->

      <!--Trusted worldwide start-->
      <div class="my-xl-7 py-5" data-cue="fadeIn">
         <div class="container py-2">
            <div class="row">
               <div class="col-lg-10 offset-lg-1">
                  <div class="text-center mb-4 mb-lg-7">
                     <small class="text-uppercase ls-md fw-semibold">
                        Trusted by
                        <span class="fw-bold text-dark">20,000+</span>
                        organizations worldwide
                     </small>
                  </div>
                  <div class="swiper-container swiper" id="swiper-1" data-pagination-type="" data-speed="400"
                     data-space-between="100" data-pagination="true" data-navigation="false" data-autoplay="true"
                     data-autoplay-delay="3000"
                     data-breakpoints='{"480": {"slidesPerView": 2}, "768": {"slidesPerView": 3}, "1024": {"slidesPerView": 5}}'>
                     <div class="swiper-wrapper pb-6">
                        <div class="swiper-slide">
                           <figure class="text-center">
                              <img src="https://block.codescandy.com/assets/images/client-logo/clients-logo-1.svg"
                                 alt="logo" />
                           </figure>
                        </div>
                        <div class="swiper-slide">
                           <figure class="text-center">
                              <img src="https://block.codescandy.com/assets/images/client-logo/clients-logo-2.svg"
                                 alt="logo" />
                           </figure>
                        </div>
                        <div class="swiper-slide">
                           <figure class="text-center">
                              <img src="https://block.codescandy.com/assets/images/client-logo/clients-logo-3.svg"
                                 alt="logo" />
                           </figure>
                        </div>
                        <div class="swiper-slide">
                           <figure class="text-center">
                              <img src="https://block.codescandy.com/assets/images/client-logo/clients-logo-4.svg"
                                 alt="logo" />
                           </figure>
                        </div>
                        <div class="swiper-slide">
                           <figure class="text-center">
                              <img src="https://block.codescandy.com/assets/images/client-logo/clients-logo-5.svg"
                                 alt="logo" />
                           </figure>
                        </div>
                        <!-- Add more slides as needed -->
                     </div>
                     <!-- Add Pagination -->
                     <div class="swiper-pagination"></div>
                     <!-- Add Navigation -->
                     <div class="swiper-navigation">
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!--Trusted worldwide end-->

      <!--Features start-->
      <section class="my-xl-7 py-5" data-cue="fadeIn">
         <div class="container">
            <div class="row">
               <div class="col-lg-8 offset-lg-2 col-md-12 col-12">
                  <div class="text-center mb-6 mb-lg-9">
                     <small class="text-primary text-uppercase ls-md fw-semibold">features</small>
                     <h2 class="my-3">Features to make you stand out</h2>
                     <p class="mb-0 lead">Manage your projects from start to finish. With all of your projects in Block,
                        you’ll always know who’s doing what, by when.</p>
                  </div>
               </div>
            </div>
            <div class="row g-lg-7 gy-5">
               <div class="col-lg-4 col-md-6">
                  <div class="text-center text-md-start" data-cue="zoomIn">
                     <div class="icon-lg icon-shape rounded bg-primary bg-opacity-10 border border-primary-subtle mb-5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                           class="bi bi-check-circle text-primary" viewBox="0 0 16 16">
                           <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                           <path
                              d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
                        </svg>
                     </div>

                     <h4>Tasks</h4>
                     <p class="mb-0">Break work into manageable pieces for you and your team. Dui erat malesuada diam.
                     </p>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6">
                  <div class="text-center text-md-start" data-cue="zoomIn">
                     <div class="icon-lg icon-shape rounded bg-primary bg-opacity-10 border border-primary-subtle mb-5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                           class="bi bi-flag-fill text-primary" viewBox="0 0 16 16">
                           <path
                              d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" />
                        </svg>
                     </div>

                     <h4>Milestones</h4>
                     <p class="mb-0">Visualise significant checkpoints in your project to measure and share progress.
                     </p>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6">
                  <div class="text-center text-md-start" data-cue="zoomIn">
                     <div class="icon-lg icon-shape rounded bg-primary bg-opacity-10 border border-primary-subtle mb-5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                           class="bi bi-clock-history text-primary" viewBox="0 0 16 16">
                           <path
                              d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z" />
                           <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z" />
                           <path
                              d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z" />
                        </svg>
                     </div>

                     <h4>Due dates and times</h4>
                     <p class="mb-0">Specify the date and time something is due so everyone’s working off the same
                        deadline.</p>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6">
                  <div class="text-center text-md-start" data-cue="zoomIn">
                     <div class="icon-lg icon-shape rounded bg-primary bg-opacity-10 border border-primary-subtle mb-5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                           class="bi bi-layout-text-window-reverse text-primary" viewBox="0 0 16 16">
                           <path
                              d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z" />
                           <path
                              d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z" />
                        </svg>
                     </div>

                     <h4>Custom templates</h4>
                     <p class="mb-0">Create your own project templates so your team can quickly and easily kick off
                        work.</p>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6">
                  <div class="text-center text-md-start" data-cue="zoomIn">
                     <div class="icon-lg icon-shape rounded bg-primary bg-opacity-10 border border-primary-subtle mb-5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                           class="bi bi-paperclip text-primary" viewBox="0 0 16 16">
                           <path
                              d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z" />
                        </svg>
                     </div>

                     <h4>Attachments</h4>
                     <p class="mb-0">Add files from your computer, Dropbox, Box, or Google Drive to any task or
                        conversation.</p>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6">
                  <div class="text-center text-md-start" data-cue="zoomIn">
                     <div class="icon-lg icon-shape rounded bg-primary bg-opacity-10 border border-primary-subtle mb-5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                           class="bi bi-people-fill text-primary" viewBox="0 0 16 16">
                           <path
                              d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
                        </svg>
                     </div>

                     <h4>Teammate</h4>
                     <p class="mb-0">Understand teammate workloads by viewing tasks assigned to them.</p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Features end-->

      <!--Visualize & plan start-->
      <section class="my-xl-7 py-5">
         <div class="container">
            <div class="row align-items-center">
               <div class="col-lg-5 col-md-6 col-12" data-cue="slideInLeft">
                  <div data-cue="fadeIn">
                     <small class="text-primary text-uppercase ls-md fw-semibold">Visualize & plan</small>
                     <div class="mb-5 mt-4">
                        <h2 class="mb-3">Build the perfect workflow for every project.</h2>
                        <p class="mb-0 lead">Track your entire project from start to finish with beautiful views that
                           make project planning a breeze.</p>
                     </div>

                     <a href="#" class="icon-link icon-link-hover">
                        Learn More
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                           class="bi bi-arrow-right" viewBox="0 0 16 16">
                           <path fill-rule="evenodd"
                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                        </svg>
                     </a>
                  </div>
               </div>
               <div class="col-lg-6 offset-lg-1 col-md-6 col-12" data-cue="slideInRight">
                  <div class="position-relative rellax" data-rellax-percentage="1" data-rellax-speed="0.8"
                     data-disable-parallax-down="md">
                     <figure>
                        <img src="https://block.codescandy.com/assets/images/landings/saas/saas-img-1.jpg" alt="landing"
                           class="img-fluid rounded-4" />
                     </figure>
                     <div
                        class="flex-column position-absolute bottom-0 mx-lg-4 mb-4 d-flex align-items-center justify-content-between ms-2">
                        <div
                           class="w-100 d-flex align-items-center p-2 justify-content-between bg-white mb-2 rounded-4 ms-2 ms-lg-7 rellax"
                           data-rellax-percentage="0.4" data-rellax-speed="0.4" data-disable-parallax-down="md">
                           <div class="d-flex align-items-center">
                              <img src="https://block.codescandy.com/assets/images/avatar/avatar-1.jpg" alt="avatar"
                                 class="avatar avatar-sm rounded-circle me-2" />
                              <h6 class="mb-0 text-truncate">Jitu Doe</h6>
                           </div>
                           <div>
                              <div class="ms-lg-7 ps-lg-6">
                                 <div class="bg-primary bg-opacity-25 fs-6 text-primary rounded-pill badge">Designer
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div
                           class="w-100 d-flex align-items-center p-2 justify-content-between bg-white mb-2 rounded-4 rellax"
                           data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="md">
                           <div class="d-flex align-items-center">
                              <img src="https://block.codescandy.com/assets/images/avatar/avatar-2.jpg" alt="avatar"
                                 class="avatar avatar-sm rounded-circle me-2" />
                              <h6 class="mb-0 text-truncate">Anita Par</h6>
                           </div>
                           <div>
                              <div class="ms-lg-7 ps-lg-6">
                                 <div class="bg-info bg-opacity-25 text-info rounded-pill badge fs-6">UI Developer</div>
                              </div>
                           </div>
                        </div>
                        <div
                           class="w-100 d-flex align-items-center p-2 justify-content-between bg-white mb-2 rounded-4 rellax ms-4 ms-lg-7"
                           data-rellax-percentage="0.6" data-rellax-speed="0.6" data-disable-parallax-down="md">
                           <div class="d-flex align-items-center">
                              <img src="https://block.codescandy.com/assets/images/avatar/avatar-4.jpg" alt="avatar"
                                 class="avatar avatar-sm rounded-circle me-2" />
                              <h6 class="mb-0 text-truncate">Sandip</h6>
                           </div>
                           <div>
                              <div class="ms-lg-7 ps-lg-6">
                                 <div class="bg-success bg-opacity-25 text-success rounded-pill badge fs-6">Stack
                                    Developer</div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Visualize & plan end-->

      <!--Collaborate start-->
      <section class="my-xl-7 py-5">
         <div class="container pb-lg-5">
            <div class="row align-items-center">
               <div class="col-lg-6 col-md-6 col-12 order-lg-2 order-1" data-cue="slideInLeft">
                  <div class="position-relative rellax mb-7 mb-lg-0" data-rellax-percentage="1" data-rellax-speed="0.8"
                     data-disable-parallax-down="md">
                     <figure>
                        <img src="https://block.codescandy.com/assets/images/landings/saas/saas-img-2.jpg" alt="landing"
                           class="img-fluid rounded-4" />
                     </figure>
                     <div class="d-flex flex-column position-absolute bottom-0 ms-4 mb-4">
                        <img src="https://block.codescandy.com/assets/images/avatar/avatar-1.jpg" alt="avatar"
                           class="avatar avatar-lg rounded-circle border border-white border-2 mb-2 rellax"
                           data-rellax-percentage="0.4" data-rellax-speed="0.4" data-disable-parallax-down="md" />
                        <img src="https://block.codescandy.com/assets/images/avatar/avatar-2.jpg" alt="avatar"
                           class="avatar avatar-lg rounded-circle border border-white border-2 mb-2 rellax"
                           data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="md" />
                        <img src="https://block.codescandy.com/assets/images/avatar/avatar-3.jpg" alt="avatar"
                           class="avatar avatar-lg rounded-circle border border-white border-2 rellax"
                           data-rellax-percentage="0.6" data-rellax-speed="0.6" data-disable-parallax-down="md" />
                     </div>
                  </div>
               </div>
               <div class="col-lg-5 offset-lg-1 col-md-6 col-12 order-lg-2" data-cue="slideInRight">
                  <div class="mt-md-5">
                     <small class="text-primary text-uppercase ls-md fw-semibold">Collaborate</small>
                     <div class="mb-5 mt-4">
                        <h2 class="mb-3">Move team ideas to action, faster.</h2>
                        <p class="lead mb-0">Collaborate and build total alignment on your project by adding comments to
                           any task or document.</p>
                     </div>
                     <ul class="list-unstyled mb-5">
                        <li class="mb-2 d-flex">
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-check-circle-fill text-success mt-1" viewBox="0 0 16 16">
                              <path
                                 d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                           </svg>
                           <span class="ms-2">Fusce ultricies velit fel dignissim</span>
                        </li>
                        <li class="mb-2 d-flex">
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-check-circle-fill text-success mt-1" viewBox="0 0 16 16">
                              <path
                                 d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                           </svg>
                           <span class="ms-2">Suspendisse potenti. Mauris et ipsum odio.</span>
                        </li>
                        <li class="mb-2 d-flex">
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              class="bi bi-check-circle-fill text-success mt-1" viewBox="0 0 16 16">
                              <path
                                 d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                           </svg>
                           <span class="ms-2">Pellentesque imperdiet blandit pretium.</span>
                        </li>
                     </ul>

                     <a href="#" class="icon-link icon-link-hover">
                        <span>Learn More</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                           class="bi bi-arrow-right" viewBox="0 0 16 16">
                           <path fill-rule="evenodd"
                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                        </svg>
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Collaborate end-->

      <!--Testimonial start-->
      <section class="py-5 py-lg-7 bg-light-subtle" data-cue="fadeIn">
         <div class="container">
            <div class="row">
               <div class="col-lg-12">
                  <div class="text-center mb-7">
                     <small class="text-primary text-uppercase ls-md fw-semibold">Testimonial</small>
                     <h2 class="mt-3 mb-0">Our happy customer love us</h2>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-lg-10 offset-lg-1">
                  <div class="swiper-container swiper" data-cue="zoomIn" id="swiper-1" data-pagination-type=""
                     data-speed="400" data-space-between="100" data-pagination="true" data-navigation="false"
                     data-autoplay="true" data-autoplay-delay="3000"
                     data-breakpoints='{"480": {"slidesPerView": 1}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView": 1}}'>
                     <div class="swiper-wrapper pb-6">
                        <div class="swiper-slide">
                           <div class="card">
                              <div class="row align-items-center">
                                 <div class="col-xl-4 col-lg-5 col-md-6 overflow-hidden d-none d-lg-block">
                                    <img
                                       src="https://block.codescandy.com/assets/images/testimonial/testimonial-img-1.jpg"
                                       class="img-fluid rounded-start-md-3 rounded-top-md-0 rounded-top-3"
                                       alt="testimonials" />
                                 </div>
                                 <div class="col-xl-8 col-lg-7 col-md-12">
                                    <div class="card-body p-4 px-xl-0">
                                       <div class="mb-6 text-inverse">
                                          <img
                                             src="https://block.codescandy.com/assets/images/client-logo/logoipsum-3.svg"
                                             alt="ipsum" />
                                       </div>
                                       <p class="card-text lead mb-7">
                                          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius
                                          enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."
                                       </p>

                                       <h5 class="mb-0">Katherine Moss</h5>
                                       <small class="text-body-tertiary">Operational Manager at Block Studio</small>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="swiper-slide">
                           <div class="card">
                              <div class="row align-items-center">
                                 <div class="col-xl-4 col-lg-5 col-md-6 overflow-hidden d-none d-lg-block">
                                    <img
                                       src="https://block.codescandy.com/assets/images/testimonial/testimonial-img-2.jpg"
                                       class="img-fluid rounded-start-md-3 rounded-top-md-0 rounded-top-3"
                                       alt="testimonials" />
                                 </div>
                                 <div class="col-xl-8 col-lg-7 col-md-12">
                                    <div class="card-body p-4 px-xl-0">
                                       <div class="mb-6 text-inverse">
                                          <img
                                             src="https://block.codescandy.com/assets/images/client-logo/logoipsum-2.svg"
                                             alt="ipsum" />
                                       </div>
                                       <p class="card-text lead mb-7">
                                          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius
                                          enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."
                                       </p>

                                       <h5 class="mb-0">Katherine Moss</h5>
                                       <small class="text-body-tertiary">Operational Manager at Block Studio</small>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="swiper-slide">
                           <div class="card">
                              <div class="row align-items-center">
                                 <div class="col-xl-4 col-lg-5 col-md-6 overflow-hidden d-none d-lg-block">
                                    <img
                                       src="https://block.codescandy.com/assets/images/testimonial/testimonial-img-3.jpg"
                                       class="img-fluid rounded-start-md-3 rounded-top-md-0 rounded-top-3"
                                       alt="testimonials" />
                                 </div>
                                 <div class="col-xl-8 col-lg-7 col-md-12">
                                    <div class="card-body p-4 px-xl-0">
                                       <div class="mb-6 text-inverse">
                                          <img
                                             src="https://block.codescandy.com/assets/images/client-logo/logoipsum-1.svg"
                                             alt="ipsum" />
                                       </div>
                                       <p class="card-text lead mb-7">
                                          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius
                                          enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."
                                       </p>

                                       <h5 class="mb-0">Katherine Moss</h5>
                                       <small class="text-body-tertiary">Operational Manager at Block Studio</small>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!-- Add more slides as needed -->
                     </div>
                     <!-- Add Pagination -->
                     <div class="swiper-pagination"></div>
                     <!-- Add Navigation -->
                     <div class="swiper-navigation">
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Testimonial end-->

      <!--Integrate apps start-->
      <section class="my-xl-7 py-5">
         <div class="container" data-cue="fadeIn">
            <div class="row">
               <div class="col-lg-6 offset-lg-3">
                  <div class="text-center mb-7 pb-2">
                     <h2 class="mb-3">Integrate apps with just a few clicks</h2>
                     <p class="mb-0">Connect your existing apps and workflows with pre-made integrations available for
                        400+ popular apps, plus custom integrations for more advanced users.</p>
                  </div>
               </div>
            </div>
            <div class="row mb-7 pb-2 text-center justify-content-center g-0">
               <div class="col-lg-12 col-12">
                  <div class="marquee" data-cue="slideInLeft">
                     <div class="track">
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-1.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Microsoft Team</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-12.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Calendar</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-9.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Jira</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-4.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Slack</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-15.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Salesforce</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-3.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Tableau</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-12.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Calendar</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-4.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Slack</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-15.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Salesforce</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-3.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Tableau</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-12.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Calendar</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-3.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Tableau</span>
                        </a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-12 col-12 px-lg-7">
                  <div class="marquee" data-cue="slideInRight">
                     <div class="track-2">
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-7.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">MS Teams</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-10.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">HubSpot</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-6.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">OneDrive</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-14.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">GitHub</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-13.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Gmail</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-11.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Google</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-14.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">GitHub</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-13.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Gmail</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-10.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">HubSpot</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-6.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">OneDrive</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-14.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">GitHub</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-13.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Gmail</span>
                        </a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-12 col-12">
                  <div class="marquee" data-cue="slideInLeft">
                     <div class="track">
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-8.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">MS Excel</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-4.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Slack</span>
                        </a>

                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-3.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Tableau</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-15.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Dropbox</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-5.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Salesforce</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-9.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Jira</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-8.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">MS Excel</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-4.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Slack</span>
                        </a>

                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-2.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Zoom</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-3.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Tableau</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-15.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Dropbox</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-5.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Salesforce</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-9.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Jira</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-15.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Dropbox</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-5.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Salesforce</span>
                        </a>
                        <a href="#" class="btn btn-light rounded-pill me-1 mb-3 btn-logo btn-lift">
                           <span><img
                                 src="https://block.codescandy.com/assets/images/integration-logo/integrate-logo-9.svg"
                                 alt="logo" class="icon-xs" /></span>
                           <span class="ms-1 d-none d-lg-inline-flex">Jira</span>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-lg-12">
                  <div class="text-center">
                     <a href="#" class="btn btn-dark me-4">Get Started</a>
                     <a href="#" class="icon-link icon-link-hover mt-3 mt-md-0">
                        <span>See all integrations</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                           class="bi bi-arrow-right" viewBox="0 0 16 16">
                           <path fill-rule="evenodd"
                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                           </path>
                        </svg>
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Integrate apps end-->

      <!--Call to action start-->
      <section class="py-5">
         <div class="container" data-cues="zoomIn">
            <div class="row bg-pattern bg-primary-gradient rounded-3 p-7 g-0">
               <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-md-12 col-12">
                  <div class="position-relative z-1 my-lg-5">
                     <div class="mb-5 text-center">
                        <h3 class="h2 text-white-stable mb-1">Try our powerful work management tools</h3>
                        <p class="mb-0 text-white-stable">Sign up for a free two-week trial of Block today — no credit
                           card required.</p>
                     </div>
                     <form class="row g-2 needs-validation d-flex mx-lg-7" novalidate>
                        <div class="col-md-7 col-xl-7 col-12">
                           <label for="notificationEmail" class="visually-hidden"></label>
                           <input type="email" id="notificationEmail" class="form-control"
                              placeholder="Enter your business email" aria-label="Enter your business email" required />
                           <div class="invalid-feedback text-start">Please choose a email.</div>
                        </div>
                        <div class="col-md-5 col-xl-5 col-12">
                           <div class="d-grid">
                              <button class="btn btn-dark" type="submit">Get notified for free</button>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--Call to action end-->
   </main>

   <footer class="pt-7">
      <div class="container">
         <!-- Footer 4 column -->
         <div class="row">
            <div class="col-lg-9 col-12">
               <div class="row" id="ft-links">
                  <div class="col-lg-3 col-12">
                     <div class="position-relative">
                        <div class="mb-3 pb-2 d-flex justify-content-between border-bottom border-bottom-lg-0">
                           <h4>Service</h4>
                           <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
                              href="#collapseLanding" role="button" aria-expanded="true"
                              aria-controls="collapseLanding">
                              <i class="bi bi-chevron-down"></i>
                           </a>
                        </div>
                        <div class="d-lg-block collapse show" id="collapseLanding" data-bs-parent="#ft-links" style="">
                           <ul class="list-unstyled mb-0 py-3 py-lg-0">
                              <li class="mb-2">
                                 <a href="./index.html" class="text-decoration-none text-reset">Web App Development</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Front End Development</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">MVP Development</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Digital Marketing</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Content Writing</a>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-12">
                     <div>
                        <div
                           class="mb-3 pb-2 d-flex justify-content-between border-bottom border-bottom-lg-0 position-relative">
                           <h4>About us</h4>
                           <a class="d-block d-lg-none stretched-link text-body collapsed" data-bs-toggle="collapse"
                              href="#collapseAccounts" role="button" aria-expanded="false"
                              aria-controls="collapseAccounts">
                              <i class="bi bi-chevron-down"></i>
                           </a>
                        </div>
                        <div class="collapse d-lg-block" id="collapseAccounts" data-bs-parent="#ft-links">
                           <ul class="list-unstyled mb-0 py-3 py-lg-0">
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Case Studies</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Blog</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Services</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">About</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Career</a>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-12">
                     <div
                        class="mb-3 pb-2 d-flex justify-content-between border-bottom border-bottom-lg-0 position-relative">
                        <h4>Technology</h4>
                        <a class="d-block d-lg-none stretched-link text-body collapsed" data-bs-toggle="collapse"
                           href="#collapseResources" role="button" aria-expanded="false"
                           aria-controls="collapseResources">
                           <i class="bi bi-chevron-down"></i>
                        </a>
                     </div>
                     <div class="collapse d-lg-block" id="collapseResources" data-bs-parent="#ft-links">
                        <ul class="list-unstyled mb-0 py-3 py-lg-0">
                           <li class="mb-2">
                              <a href="./docs/index.html" class="text-decoration-none text-reset">Next.js</a>
                           </li>
                           <li class="mb-2">
                              <a href="#!" class="text-decoration-none text-reset">Sanity</a>
                           </li>
                           <li class="mb-2">
                              <a href="./changelog.html" class="text-decoration-none text-reset">Content ful</a>
                           </li>
                           <li class="mb-2">
                              <a href="#!" class="text-decoration-none text-reset">Vercel</a>
                           </li>
                           <li class="mb-2">
                              <a href="#!" class="text-decoration-none text-reset">Netlify</a>
                           </li>
                        </ul>
                     </div>
                  </div>
                  <div class="col-lg-3 col-12">
                     <div
                        class="mb-3 pb-2 d-flex justify-content-between border-bottom border-bottom-lg-0 position-relative">
                        <h4>Locations</h4>
                        <a class="d-block d-lg-none stretched-link text-body collapsed" data-bs-toggle="collapse"
                           href="#collapseLocations" role="button" aria-expanded="false"
                           aria-controls="collapseLocations">
                           <i class="bi bi-chevron-down"></i>
                        </a>
                     </div>
                     <div class="collapse d-lg-block" id="collapseLocations" data-bs-parent="#ft-links">
                        <ul class="list-unstyled mb-0 py-3 py-lg-0">
                           <li class="mb-2">
                              <a href="./docs/index.html" class="text-decoration-none text-reset">India</a>
                           </li>
                           <li class="mb-2">
                              <a href="#!" class="text-decoration-none text-reset">Australia</a>
                           </li>
                           <li class="mb-2">
                              <a href="./changelog.html" class="text-decoration-none text-reset">Brazil</a>
                           </li>
                           <li class="mb-2">
                              <a href="#!" class="text-decoration-none text-reset">Canada</a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-3 col-12">
               <div class="me-7">
                  <h4 class="mb-4">Headquarters</h4>
                  <p class="text-body-secondary">Codescandy, 412, Residency Rd, Shanthala Nagar, Ashok Nagar, Bengaluru,
                     Karnataka, India 560025</p>
               </div>
            </div>
         </div>
      </div>
      <div class="container mt-7 pt-lg-7 pb-4">
         <div class="row align-items-center">
            <div class="col-md-3">
               <a class="mb-4 mb-lg-0 d-block text-inverse" href="../index.html"><img
                     src="https://block.codescandy.com/assets/images/logo/logo.svg" alt="" /></a>
            </div>
            <div class="col-md-9 col-lg-6">
               <div class="small mb-3 mb-lg-0 text-lg-center">
                  Copyright © 2024

                  <span class="text-primary"><a href="#">Block Bootstrap 5 Theme</a></span>
                  | Designed by
                  <span class="text-primary"><a href="#">CodesCandy</a></span>
               </div>
            </div>
            <div class="col-lg-3">
               <div class="text-lg-end d-flex align-items-center justify-content-lg-end">
                  <div class="dropdown">
                     <button class="btn btn-light btn-icon rounded-circle d-flex align-items-center" type="button"
                        aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
                        <i class="bi theme-icon-active lh-1"><i class="bi theme-icon bi-sun-fill"></i></i>
                        <span class="visually-hidden bs-theme-text">Toggle theme</span>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
                        <li>
                           <button type="button" class="dropdown-item d-flex align-items-center active"
                              data-bs-theme-value="light" aria-pressed="true">
                              <i class="bi theme-icon bi-sun-fill"></i>
                              <span class="ms-2">Light</span>
                           </button>
                        </li>
                        <li>
                           <button type="button" class="dropdown-item d-flex align-items-center"
                              data-bs-theme-value="dark" aria-pressed="false">
                              <i class="bi theme-icon bi-moon-stars-fill"></i>
                              <span class="ms-2">Dark</span>
                           </button>
                        </li>
                        <li>
                           <button type="button" class="dropdown-item d-flex align-items-center"
                              data-bs-theme-value="auto" aria-pressed="false">
                              <i class="bi theme-icon bi-circle-half"></i>
                              <span class="ms-2">Auto</span>
                           </button>
                        </li>
                     </ul>
                  </div>
                  <div class="ms-3 d-flex gap-2">
                     <a href="#!" class="btn btn-instagram btn-light btn-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-instagram" viewBox="0 0 16 16">
                           <path
                              d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z">
                           </path>
                        </svg>
                     </a>
                     <a href="#!" class="btn btn-facebook btn-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-facebook" viewBox="0 0 16 16">
                           <path
                              d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
                           </path>
                        </svg>
                     </a>
                     <a href="#!" class="btn btn-twitter btn-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-twitter" viewBox="0 0 16 16">
                           <path
                              d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z">
                           </path>
                        </svg>
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </footer>
   <div class="btn-scroll-top">
      <svg class="progress-square svg-content" width="100%" height="100%" viewBox="0 0 40 40">
         <path
            d="M8 1H32C35.866 1 39 4.13401 39 8V32C39 35.866 35.866 39 32 39H8C4.13401 39 1 35.866 1 32V8C1 4.13401 4.13401 1 8 1Z" />
      </svg>
   </div>
   <!-- Libs JS -->
   <script src="https://block.codescandy.com/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/simplebar/dist/simplebar.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/headhesive/dist/headhesive.min.js"></script>

   <!-- Theme JS -->
   <script src="https://block.codescandy.com/assets/js/theme.min.js"></script>

   <script src="https://block.codescandy.com/assets/libs/parallax-js/dist/parallax.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/parallax.js"></script>
   <script src="https://block.codescandy.com/assets/libs/rellax/rellax.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/rellax.js"></script>
   <!-- Swiper JS -->
   <script src="https://block.codescandy.com/assets/libs/swiper/swiper-bundle.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/swiper.js"></script>
   <script src="https://block.codescandy.com/assets/libs/scrollcue/scrollCue.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/scrollcue.js"></script>
</body>

</html>